<template>
    <div class="mrc-ess-rich-text-html">
        <!-- 内容内包含標簽</ -->
        <Editor v-if="props.text && props.vHtml == false && props.text.indexOf('</') != -1" mode='simple' :model-value="props.text" :defaultConfig="editorConfig"
            @onCreated="handleCreated"/>
        <!-- 不包含標簽就是直接顯示 -->
        <div v-html="props.text" v-else></div>
    </div>
</template>

<script lang="ts" setup>
// import { Editor } from '@wangeditor/editor-for-vue'

import { onBeforeUnmount, ref, shallowRef, onMounted, provide } from 'vue'

const props = defineProps({
    // 文字内容
    text: {
        type: String,
        default: ""
    },
    // 是否使用v-html標簽顯示
    vHtml: {
        type: Boolean,
        default: false
    }
})

// 编辑器实例，必须用 shallowRef
const _editor = shallowRef()

// 编辑器配置
const editorConfig = {
    readOnly: true,
    autoFocus: false
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = _editor.value
    if (editor == null) return
    editor.destroy()
})

// 編輯器創建完成
const handleCreated = (editor: any) => {
    _editor.value = editor // 记录 editor 实例，重要！
}

</script>

<style scoped>
.mrc-ess-rich-text-html :deep(.w-e-text-container) {
    color: rgb(var(--v-theme-text--black));
}

.mrc-ess-rich-text-html :deep(.w-e-text-container [data-slate-editor] p) {
    margin: 4px 0;
}
.mrc-ess-rich-text-html :deep(.w-e-text-container [data-slate-editor]) {
    padding-left: 0px;
    padding-right: 0px;
    word-break: break-all;
}
.mrc-ess-rich-text-html :deep(.w-e-text-container) {
    background-color: inherit;
}
.mrc-ess-rich-text-html :deep(*) {
    color: inherit;
    font-size: inherit;
}



/* h標簽樣式 */
.mrc-ess-rich-text-html :deep(.w-e-text-container h1) {
   font-size: 21px;
   font-weight: bold;
}

.mrc-ess-rich-text-html :deep(.w-e-text-container h2) {
   font-size: 21px;
   font-weight: bold;
}

.mrc-ess-rich-text-html :deep(.w-e-text-container h3) {
   font-size: 16px;
   font-weight: bold;
}

.mrc-ess-rich-text-html :deep(.w-e-text-container h4) {
   font-size: 14px;
   font-weight: bold;
}

.mrc-ess-rich-text-html :deep(.w-e-text-container h5) {
   font-size: 12px;
   font-weight: bold;
}

.mrc-ess-rich-text-html :deep(.w-e-text-container h6) {
   font-size: 12px;
}
</style>
